<template>
  <div class="label-box-content">
    <el-row :gutter="20" type="flex">
      <el-col :span="10">
        <div class="messageCenter">
          <NewCard title="消息中心" :isright="isright">
            <template slot="right">
              <span v-if="unreadNum">{{ unreadNum }}</span>
            </template>
            <div class="messageList" ref="messageList">
              <el-collapse
                v-for="(item, index) in massgetabel"
                :key="index"
                v-model="activeName"
                accordion
                @change="handleChange(item)"
              >
                <el-collapse-item
                  :title="item.title"
                  :class="item.status == 1 ? 'isClick' : ''"
                  :name="index"
                >
                  <div>{{ item.content }}</div>
                  <span>{{ item.createTime }}</span>
                </el-collapse-item>
              </el-collapse>
            </div>
          </NewCard>
        </div>
      </el-col>
      <el-col :span="14">
        <FeaturedContent></FeaturedContent>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import FeaturedContent from "@/components/FeaturedContent";
import {
  getmessagelist,
  editmessagelist,
  getMessageUnreadSumApi
} from "../../../../BMViews/api/messageCenter/messageCenter";

export default {
  name: "MessageCenter",
  components: { NewCard, FeaturedContent },
  data() {
    return {
      isright: true, //显示消息条数
      activeName: "1", //激活的折叠面板
      pageing: { pageNum: 1, pageSize: 10 },
      massgetabel: [],
      newmassgetabel: [],
      unreadNum: 0,//未读数量
      total: 0,//总数
    };
  },
  created() {
    this.getmessagelistfn(); // 获取通知列表
    this.getMessageUnreadSum() // 查询用户未读数量
  },
  computed: {
    // 找出未读的数值
    getNum() {
      return this.massgetabel.filter((item) => (item = item.status == 0)).length;
    },
  },
  mounted(){
    this.$refs.messageList.addEventListener("scroll", this.lazyLoading); // 滚动到底部，再加载的处理事件
  },
  methods: {
    // 滚动到底部加载更多数据
    lazyLoading(e) {
      const scrollTop = e.target.scrollTop + 1; // 滚动条滚动时，距离顶部的距离
      const windowHeight = e.target.clientHeight; // 可视区的高度
      const scrollHeight = e.target.scrollHeight; // 滚动条的总高度
      // 滚动条到底部
      if (scrollTop + windowHeight >= scrollHeight) {
        if(this.massgetabel.length >= this.total) return //获取完了就不用再获取了
        this.pageing.pageNum++;
        this.getmessagelistfn()// 获取通知列表
      }
    },

    // 获取通知列表
    async getmessagelistfn() {
      const toUser = this.$store.state.user.userId
      const userType = 1
      const { pageNum, pageSize } = this.pageing;
      let { rows, code, total } = await getmessagelist({ pageNum, pageSize, toUser, userType });
      if (code == 200) {
        this.massgetabel = [...this.massgetabel, ...rows];
        this.newmassgetabel = this.massgetabel.filter(
          (item) => (item = item.status == 0)
        );
        this.total = total
      }
    },

    // 点击消息修改消息状态
    async handleChange(val) {
      console.log(val);
      if (val.status != 1) {
        let { code } = await editmessagelist({ id: val.id, status: 1 });
        if (code != 200) return;
        // 找出状态并改变
        this.massgetabel = this.massgetabel.map((item) => {
          if (item.id == val.id) item.status = 1;
          return item;
        });
        this.getMessageUnreadSum() // 查询用户未读数量
      } else {
        console.log("已查看");
      }
    },

    // 查询用户未读数量
    async getMessageUnreadSum(){
      let toUser = this.$store.state.user.userId
      let result = await getMessageUnreadSumApi({toUser})
      if(result.code==200){
        this.unreadNum = result.msg
      }
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 30px;
}
.messageCenter{
  height: 100%;
}
::v-deep .messageCenter .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > .top {
  position: relative;
}
.messageCenter >>> .el-card__body > div {
  height: calc(100% - 45px);
  padding: 0;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

::v-deep .featH .el-card__body{
  padding: 0 30px;
  height: 100%;
}

/* 消息中心 */
.messageCenter .messageList{
  height: 100%;
  overflow-y: auto;
  padding: 0 30px;
}
::v-deep .messageCenter .top {
  margin: 0 30px;
}
::v-deep .messageCenter .top .right {
  position: absolute;
  left: 110px;
}
::v-deep .messageCenter .top .right > span {
  display: block;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  line-height: 24px;
  text-align: center;
  background-color: #f87a23;
  color: #fff;
  border-radius: 50%;
}

/* 折叠面板 */
.messageCenter .el-collapse {
  border: 0;
}
.messageCenter .el-collapse .el-collapse-item {
  position: relative;
}
::v-deep .messageCenter .el-collapse-item .el-collapse-item__header::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  left: -15px;
  top: 25px;
  border-radius: 50%;
  background-color: #f87a23;
}
::v-deep
  .messageCenter
  .el-collapse-item.isClick
  .el-collapse-item__header::before {
  display: none;
}
::v-deep .messageCenter .el-collapse .el-collapse-item__header {
  font-size: 16px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}
::v-deep .messageCenter .el-collapse .el-collapse-item__header.is-active {
  height: 48px;
  line-height: 48px;
}
::v-deep .messageCenter .el-collapse .el-collapse-item__content {
  padding-bottom: 20px;
}
::v-deep .messageCenter .el-collapse .el-collapse-item__content > div {
  color: #666;
}
::v-deep .messageCenter .el-collapse .el-collapse-item__content > span {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 20px;
}
</style>
